<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Avatar :src="userAvator"/>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="logout">退出登录</DropdownItem>
        <DropdownItem name="changePWD">修改密码</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Modal
        v-model="changePWDModal"
        title="修改密码">
        <div id="box">
          <i-form :model="changePWDData" label-position="right" ref="changePWDData" :rules="PWDruleValidate" :label-width="100">
            <FormItem label="原密码：" prop="oldPWD">
                <i-input v-model="changePWDData.oldPWD"></i-input>
            </FormItem>
            <FormItem label="新密码：" prop="newPWD">
              <i-input v-model="changePWDData.newPWD"></i-input>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="btn_loading" @click="resetPWD('changePWDData')">重置</i-button>
            <i-button type="primary" :loading="btn_loading" @click="okPWD('changePWDData')">确定</i-button>
        </div>
    </Modal>
  </div>
</template>

<script>
import { EditPwd } from "@/api/userLogin";
import "./user.less";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      changePWDModal: false,
      btn_loading: false,
      changePWDData: {
        oldPWD: "",
        newPWD: ""
      },
      PWDruleValidate: {
        oldPWD: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur"
          }
        ],
        newPWD: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    }
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    handleClick(name) {
      switch (name) {
        case "logout":
          this.handleLogOut().then(() => {
            this.$router.push({
              name: "login"
            });
          });
          break;
        case "changePWD":
          this.$set(this, "changePWDModal", true);
          break;
      }
    },
    resetPWD(name) {
      this.$refs[name].resetFields();
      this.$set(this, "changePWDData", {
        oldPWD: "",
        newPWD: ""
      });
    },
    okPWD(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Modal.confirm({
            title: "确认修改？",
            content: "<p>一旦修改无法撤销，确定修改？</p>",
            onOk: () => {
              this.changeFun();
            },
            onCancel: () => {
              this.$Message.info("确认取消");
            }
          });
          this.$set(this, "modal", false);
        } else {
          this.$Message.error("提交内容有误！请检查");
        }
      });
    },
    changeFun() {
      const p = {
        pwd: this.changePWDData.oldPWD,
        newPwd: this.changePWDData.newPWD
      };
      EditPwd(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "changePWDData", {
              oldPWD: "",
              newPWD: ""
            });
            this.handleLogOut().then(() => {
              this.$router.push({
                name: "login"
              });
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
